<template>
  <page-header-wrapper>
    <a-card :bordered="false">
      <s-table
        :alert="{ clear: this.onClear, clearTitle: '删除' }"
        row-key="id"
        size="default"
        :columns="columns"
        :data="loadData"
        :rowSelection="{ selectedRowKeys: this.selectedRowKeys, onChange: this.onSelectChange }"
        ref="table"
      >
        <span slot="type" slot-scope="text">{{ text | typeFilter }}</span>
        <span slot="action" slot-scope="text, record">
          <a-button type="link" @click="handleView(record)" size="small">查看</a-button>
        </span>
      </s-table>
      <a-modal title="操作日志" :width="800" :mask-closable="false" :destroy-on-close="true" v-model="visible">
        <a-form class="permission-form">
          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="操作">
            <span>{{ records.action }}</span>
          </a-form-item>
          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="操作类型">
            <span>{{ records.type | typeFilter }}</span>
          </a-form-item>
          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="路由">
            <span>{{ records.route }}</span>
          </a-form-item>
          <a-form-item v-if="records.data_id" :labelCol="labelCol" :wrapperCol="wrapperCol" label="数据ID">
            <span>{{ records.data_id }}</span>
          </a-form-item>
          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="操作人">
            <span>{{ records.admin }}</span>
          </a-form-item>
          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="操作日期">
            <span>{{ records.created_at }}</span>
          </a-form-item>
          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="GET参数">
            <prism-editor readonly :code="records.get_params | jsonFilter" language="js"></prism-editor>
          </a-form-item>
          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="POST参数">
            <prism-editor readonly :code="records.post_params | jsonFilter" language="js"></prism-editor>
          </a-form-item>
          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="HEADER参数">
            <prism-editor readonly :code="records.header_params | jsonFilter" language="js"></prism-editor>
          </a-form-item>
          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="响应参数">
            <prism-editor readonly :code="records.response_params | jsonFilter" language="js"></prism-editor>
          </a-form-item>
        </a-form>
        <template slot="footer">
          <a-button key="back" @click="visible = false">关闭</a-button>
        </template>
      </a-modal>
    </a-card>
  </page-header-wrapper>
</template>

<script>
import { STable } from '@/components'
import { getActionLog, deleteActionLog } from '@/api/auth'
import 'prismjs'
import 'prismjs/themes/prism-okaidia.css'
import PrismEditor from 'vue-prism-editor'

const TYPES = {
  add: '添加',
  edit: '编辑',
  del: '删除',
  login: '登录'
}

const columns = [
  {
    title: '操作',
    dataIndex: 'action'
  },
  {
    title: '操作类型',
    dataIndex: 'type',
    scopedSlots: { customRender: 'type' }
  },
  {
    title: '路由',
    dataIndex: 'route'
  },
  {
    title: '数据ID',
    dataIndex: 'data_id'
  },
  {
    title: '操作人',
    dataIndex: 'admin'
  },
  {
    title: '操作日期',
    dataIndex: 'created_at'
  },
  {
    title: '操作',
    width: '150px',
    scopedSlots: { customRender: 'action' }
  }
]

export default {
  name: 'ActionLog',
  components: {
    STable,
    PrismEditor
  },
  data () {
    return {
      visible: false,
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },
      form: this.$form.createForm(this),
      // 表头
      columns,
      modalLoading: false,
      selectedRowKeys: [],
      records: {},
      // 加载数据方法 必须为 Promise 对象
      loadData: (parameter) => {
        return getActionLog(parameter).then((res) => {
          return res.data
        })
      },
    }
  },
  filters: {
    typeFilter (key) {
      return TYPES[key] ? TYPES[key] : key
    },
    jsonFilter (value) {
      return JSON.stringify(value)
    }
  },
  created () {},
  methods: {
    handleView: function (record) {
      this.records = record
      console.log(record)
      this.visible = true
    },
    onSelectChange (selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys
    },
    onClear: function (clertSeleted) {
      this.$confirm({
        title: '提示',
        content: '确定要删除选择的操作日志吗?',
        onOk: () => {
          const hide = this.$message.loading('删除中...', 0)
          deleteActionLog({
            ids: this.selectedRowKeys
          }).then((res) => {
            hide()
            if (res.code === 0) {
              clertSeleted()
              this.$message.success('操作成功！')
              this.selectedRowKeys = []
              this.$refs.table.refresh()
            } else {
              this.$error({
                content: res.msg
              })
            }
          })
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.permission-form {
  /deep/ .permission-group {
    margin-top: 0;
    margin-bottom: 0;
  }
}
</style>
